<template>
  <div class="headerCoupons">
    <!-- 搜索框 -->
    <div class="header_search_item" >
      <input
        type="text"
        v-model="keywords"
        placeholder="会员ID/手机号码"
        @confirm="getCouponLists(1)"
      />
      <div class="icon miniprogram" @click="getCouponLists(1)">
        <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
      </div>
    </div>
    <!-- 优惠券核销 -->
    <div class="exchange-coupon-container">
      <ul class="exchange-coupon" v-if="couponsList.length>0">
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
          >
          <li class="coupons-li" v-for="(item, index) in couponsList" :key="index">
            <section class="coupons-box">
              <section class="coupon-left">
                <h1 v-if="item.promotion_type==1" class="coupon-price">{{item.value}}<span class="txt">折</span></h1>
                <h1 v-else class="coupon-price" v-html="scaleGoodsPriceFn(item.value)"></h1>
                <div v-if="item.coupon_type!=3">
                  <p v-if="item.at_least>0">满{{item.at_least}}元使用</p>
                  <p v-else>不限订单金额</p>
                </div>
              </section>
              <section class="coupon-right">
                <section class="coupon-l">
                <div class="name">
                  <h4>{{item.title}}</h4>
                  <p>{{item.start_time}} 至 {{item.end_time}}</p>
                </div>
                <span class="explain">仅在有限时间内使用</span>
                </section>
                <section class="coupon-r">
                  <van-button class="btn" color="linear-gradient(to right, #F82337, #FF2D59)" round @click="verification(item.user_coupon_id)" >立即核销</van-button>
                </section>
                <!-- <div class="point"></div> -->
              </section>
            </section>
          </li>
        </van-list>
      </ul>

      <div class="no-data" v-else>
        <no-data v-if="keywords" :noData="noData"></no-data>
        <no-data v-else :noData="noData1"></no-data>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import noData from '@/components/noData/index'
  import { scaleGoodsPrice } from '@/utils/index'
  import { getCoupons, getWriteOffCoupons } from '@/api/writeOffCoupons/index'
  export default Vue.extend({
    components: {
      noData
    },
    data() {
      return {
        keywords: '',
        noData: {
          img: 'https://img.wifenxiao.com/h5-wfx/images/no-coupon.png',
          text: '暂无优惠券',
          marginTop: '80px'
        },
        noData1: {
          img: 'https://img.wifenxiao.com/h5-wfx/images/no-coupon.png',
          text: '请输入指定会员ID/手机号码',
          marginTop: '80px'
        },
        loading: false,
        finished: false,
        error: false,
        p: 2,
        couponsList: []
      }
    },
    mounted() {
      window.addEventListener('reachbottom', () => {
        if (!this.finished) {
          this.onLoad()
        }
      })
    },
    methods: {
      scaleGoodsPriceFn(price, className) {
        return scaleGoodsPrice(price, className)
      },
      onLoad() {
        const sendData = {
          mobile: this.keywords,
          p: this.p
        }
        getCoupons(sendData).then(res => {
          this.loading = false
          if (res.status == 1) {
            this.couponsList.push(...res.data.list)
            if (res.data.list.length < 10) {
              this.finished = true
            }
            // this.finished = true
            this.p++
          } else {
            this.$Error(res.msg)
          }
        })
      },
      getCouponLists(type) {
        this.finished = false
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        const sendData = {
          mobile: this.keywords
        }
        getCoupons(sendData).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.couponsList = res.data.list
            // this.onLoad()
            if (res.data.list.length < 10) {
              this.finished = true
            }
          } else {
            this.couponsList = []
            if (type === 1) {
              this.$Error(res.msg)
            }
          }
        })
      },
      verification(userCouponId) {
        // console.log(userCouponId)
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        const sendData = {
          user_coupon_id: userCouponId
        }
        getWriteOffCoupons(sendData).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error(res.msg)
            this.getCouponLists(2)
          } else {
            this.$Error(res.msg)
          }
        })
      }
    }
  })
</script>
<style lang='scss'>
  @import "@/styles/mixin";
  @import '@/styles/user/coupons/index.scss';
  .headerCoupons {
    background-color: #fff;
    padding: 20px;
    margin: 0 auto;
    .header_search_item {
      position: relative;
      input {
        display: inline-block;
        width: 100%;
        height: 64px;
        font-size: 24px;
        padding: 15px 70px;
        border: 0;
        background-color: #f5f5f5;
        border-radius: 30px;
      }
      .icon {
        position: absolute;
        line-height: 72px;
        left: 42px;
        top: 16px;
        color: #999999;
        font-size: 28px;
        margin-right: 20px;
        &.miniprogram {
          line-height: initial;
          left: 36px;
          top: 18px;
        }
        .icon_search, .img_search{
          width:28px;
          height:28px;
        }
      }
    }
    .exchange-coupon-container {
      .coupons-li{
        margin-top: 30px;
      }
    }
  }

</style>
